<template>
	<view>
		<u-sticky customNavHeight="0">
			<view>
				<view class="y-system-height bg-white"></view>
				<view class="bg-white y-flex y-font-size-26 y-p-y-20 y-p-x-30 y-align-center y-justify-between">
					<view class="w-90 y-flex y-justify-end" @click="isEdit = !isEdit">
						<span v-if="!isEdit">编辑</span>
						<span v-else>取消</span>
					</view>
					<view class="y-weight-bold y-font-size-32">
						购物车
					</view>
					<view class="w-90"></view>
				</view>
			</view>
		</u-sticky>
		<view>
			<view class="store-list y-p-30">
				<view class="bg-white store-single y-p-30 y-m-b-30 y-radius-30"
					v-for="(storeItem, storeIndex) in shoppingCart" :key="storeIndex">
					<view @click="storeSelBtn(storeIndex,storeItem.goodsList,storeItem.storeName)"
						class="store-header y-flex y-align-center">
						<view class="sel-btn y-p-t-5">
							<u-icon v-if="(storeItem.isBuySelect && !isEdit) || (storeItem.isDelSelect && isEdit)"
								name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
							<view v-else class="no-select"></view>
						</view>
						<span class="y-font-size-30 y-m-l-13 y-m-r-10">{{storeItem.storeName}}</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="goods-list y-p-l-20">
						<view class="goods-item y-flex y-p-t-20" v-for="(goodsItem, goodsIndex) in storeItem.goodsList"
							:key="goodsIndex">
							<view @click="goodsSelBtn(storeIndex, goodsIndex,goodsItem,storeItem.storeName)"
								class="y-flex y-align-center">
								<view class="sel-btn">
									<u-icon
										v-if="(goodsItem.isBuySelect && !isEdit) || (goodsItem.isDelSelect && isEdit)"
										name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
									<view v-else class="no-select"></view>
								</view>
							</view>
							<view class="y-m-l-15">
								<u-image :src="goodsItem.image" radius="10rpx" width="162rpx" height="162rpx"></u-image>
							</view>
							<view class="y-m-l-28 y-flex y-flex-1 y-flex-column">
								<view class="y-flex-1">
									<view class="goods-name y-font-size-28"
										style="height: 60px; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;">
										{{goodsItem.goodsName}}
									</view>
									<view class="goods-attr y-flex y-m-t-15">
										<u-tag v-if="goodsItem.attrList.length > 0" :text="goodsItem.attrList" plain
											size="mini" type="warning"></u-tag>
										<u-tag v-else text="默认规格" plain size="mini" type="warning"></u-tag>
									</view>
								</view>
								<view class="goods-price y-flex y-align-end y-flex-1">
									<view class="y-flex-1 y-font-size-30 y-weight-bold color-price"> ￥
										{{goodsItem.price}}
									</view>
									<view>
										<u-number-box size="18" v-model="goodsItem.count"
											@minus='postjianCarts(goodsItem.cart_id)'
											@plus='postjiaCarts(goodsItem.cart_id)'></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="y-position-fixed y-bottom-0 y-left-0 y-right-0 y-p-y-20 y-p-x-30 bg-white y-flex"
			style="z-index: 4;">
			<view class="y-flex y-flex-1 y-align-center">
				<view @click="allSelBtn()" class="store-header y-flex y-align-center">
					<view class="sel-btn y-p-t-5">
						<u-icon v-if="allSelState" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
						<view v-else class="no-select"></view>
					</view>
					<span class="y-font-size-28 y-m-l-10">全选</span>
				</view>
			</view>
			<view class="y-flex y-align-center y-font-size-28">
				<view v-if="!isEdit" class="y-font-size-33"> 总计: <span class="color-price y-weight-bold y-m-l-8">￥
						{{totalPrice}} </span> </view>
				<view class="y-flex y-m-l-25">
					<u-button @click='todindan()' v-if="!isEdit" shape="circle" :hairline="false"
						:customStyle="submitBtnStyle"> 结算(
						{{totalSelCount}} )
					</u-button>
					<u-button @click='postdelCart()' v-else shape="circle" :hairline="false"
						:customStyle="submitBtnStyle"> 删除(
						{{totalSelCount}} )
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false, //是否编辑（购物/编辑）
				shoppingCart: [], //购物车数据
				submitBtnStyle: {
					background: '#FD7026',
					color: '#ffffff',
					border: 'none'
				}, //结算、删除按钮的样式
				dindans: [{
					name: '',
					checkList: []
				}],
				cart_ids: {
					cart_id: []
				}
			}
		},
		computed: {
			//是否已经全部选中
			allSelState() {
				let buyAllSelect = true // 购物全选
				let delAllSelect = true // 编辑全选
				this.shoppingCart.forEach(sitem => {
					sitem.goodsList.forEach(gitem => {
						if (!gitem.isBuySelect) buyAllSelect = false;
						if (!gitem.isDelSelect) delAllSelect = false;
					})
				})
				if (!this.isEdit) return buyAllSelect;
				else return delAllSelect;
			},
			//总价格
			totalPrice() {
				let totalPrice = 0
				this.shoppingCart.forEach(sitem => {
					sitem.goodsList.forEach(gitem => {
						if (gitem.isBuySelect) {
							totalPrice = totalPrice * 1 + gitem.price * gitem.count
						}
					})
				})
				return totalPrice
			},
			//当前操作下选中的数量
			totalSelCount() {
				let buyCount = 0 // 购物全选
				let delCount = 0 // 编辑全选
				this.shoppingCart.forEach(sitem => {
					sitem.goodsList.forEach(gitem => {
						if (gitem.isBuySelect) {
							buyCount = buyCount * 1 + gitem.count
						}
						if (gitem.isDelSelect) {
							delCount = delCount * 1 + 1
						}
					})
				})
				if (!this.isEdit) {
					return buyCount
				} else {
					return delCount
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.cart_ids.cart_id = []
			this.getData()
		},
		methods: {


			postdelCart() {
				console.log("ssssdindans:"+this.dindans);
				for (var a = 0; a < this.dindans.length; a++) {
					for (var i = 0; i < this.dindans[a].checkList.length; i++) {
						this.cart_ids.cart_id.push(this.dindans[a].checkList[i].cart_id)
					}
				}
				this.$http.postdelCart(this.cart_ids).then(res => {
					uni.$u.toast(res.info);

				})

			},

			todindan() {

console.log("ssssdindans:"+this.dindans);
				uni.setStorage({
					key: 'qiansum',
					data: this.totalPrice
				})




				for (var a = 0; a < this.dindans.length; a++) {
					this.cart_ids.cart_id = []
					if (this.dindans[a].checkList.length > 0) {
						for (var a = 0; a < this.dindans.length; a++) {
							for (var i = 0; i < this.dindans[a].checkList.length; i++) {
								this.cart_ids.cart_id.push(this.dindans[a].checkList[i].cart_id)
							}
						}
						// this.$http.getgetyorder(this.cart_ids).then(res => {
						console.log(this.cart_ids);
						uni.setStorage({
							key: 'shopddan',
							data: this.cart_ids
						})
						uni.navigateTo({
							url: '../dindan/dindan'
						})
						// })

					} else {
						uni.$u.toast('请先选择物品');
					}
				}



			},

			//请求数据。。。
			getData() {

				this.shoppingCart = []
				this.$http.getgetCart().then(res => {
					console.log(res);
					if (res.code == 4002) {
						uni.$u.toast(res.info);
						uni.reLaunch({
							url: '../loginfor/loginfor'
						})
					} else {
						for (let i = 0; i < res.data.length; i++) {
							let goodsList = []
							for (let j = 0; j < res.data[i].goodsList.length; j++) {
								let obj = {
									id: res.data[i].goodsList[j].id,
									goodsName: res.data[i].goodsList[j].name,
									image: res.data[i].goodsList[j].cover,
									price: res.data[i].goodsList[j].price_selling,
									attrList: res.data[i].goodsList[j].goods_spec,
									count: res.data[i].goodsList[j].cart_number,
									cart_id: res.data[i].goodsList[j].cart_id,
									isDelSelect: false,
									isBuySelect: false,
								}
								console.log(obj);
								goodsList.push(obj)
								console.log("/////////////////");
							}

							this.shoppingCart.push({
								id: res.data[i].id,
								storeName: res.data[i].storeName,
								isDelSelect: false,
								isBuySelect: false,
								goodsList: goodsList
							})
							console.log(this.shoppingCart);
							console.log("******************");
						}
					}

					// this.shoppingCart = res.data
				})
				console.log(this.shoppingCart);
			},
			//商家的选中与否
			storeSelBtn(storeIndex, storeItem, name) {
				for (var a = 0; a < this.dindans.length; a++) {
					if (this.dindans[a].isBuySelect == false) {
						
					}
				}


				console.log(name);
				if (!this.isEdit) { //购物
					this.shoppingCart[storeIndex].isBuySelect = !this.shoppingCart[storeIndex].isBuySelect
					this.shoppingCart[storeIndex].goodsList.forEach(item => {
						item.isBuySelect = this.shoppingCart[storeIndex].isBuySelect
					})
				} else { //编辑
					this.shoppingCart[storeIndex].isDelSelect = !this.shoppingCart[storeIndex].isDelSelect
					this.shoppingCart[storeIndex].goodsList.forEach(item => {
						item.isDelSelect = this.shoppingCart[storeIndex].isDelSelect
					})
				}
				console.log("商家选中storeItem*", storeItem);
				this.dindans.name = name
				for (var a = 0; a < this.dindans.length; a++) {
					for (var i = 0; i < storeItem.length; i++) {
						if (storeItem[i].isBuySelect == false) {
							this.dindans[a].checkList = []
						} else if (storeItem[i].isBuySelect == true) {
							for (var a = 0; a < this.dindans.length; a++) {
								this.dindans[a].checkList.push(storeItem[i])
							}
						}
					}
				}

				console.log("选中的数据：dindans", this.dindans);
			},
			//商品的选中与否
			goodsSelBtn(storeIndex, goodsIndex, goodsItem, name) {

				console.log(name);
				if (!this.isEdit) { //购物
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isBuySelect = !this.shoppingCart[storeIndex]
						.goodsList[goodsIndex].isBuySelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item => {
						if (!item.isBuySelect) {
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isBuySelect = allIsSel
				} else { //编辑
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isDelSelect = !this.shoppingCart[storeIndex]
						.goodsList[goodsIndex].isDelSelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item => {
						if (!item.isDelSelect) {
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isDelSelect = allIsSel
				}

				console.log("商品选中goodsItem：", goodsItem);
				if (goodsItem.isBuySelect == false) {
					for (var a = 0; a < this.dindans.length; a++) {
						for (var i = 0; i < this.dindans[a].checkList.length; i++) {
							if (this.dindans[a].checkList[i].cart_id == goodsItem.cart_id) {
								this.dindans[a].checkList.splice(i, 1)
							}
						}
					}
				} else if (goodsItem.isBuySelect == true) {
					for (var a = 0; a < this.dindans.length; a++) {
						this.dindans[a].checkList.push(goodsItem)
					}
				}
				console.log("选中的数据dindans：", this.dindans);
			},
			//全选
			allSelBtn() {
				let toState = !this.allSelState
				if (!this.isEdit) { //购物
					this.shoppingCart.forEach(sitem => {
						sitem.isBuySelect = toState
						sitem.goodsList.forEach(gitem => {
							gitem.isBuySelect = toState
						})
					})
				} else { //编辑
					this.shoppingCart.forEach(sitem => {
						sitem.isDelSelect = toState
						sitem.goodsList.forEach(gitem => {
							gitem.isDelSelect = toState
						})
					})
				}
			},
			//商品的数量增减
			countChange(storeIndex, goodsIndex) {

				//请求后台改变购物车商品的数量。。。storeIndex, goodsIndex
			},

			//加

			postjiaCarts(id) {
				console.log("+:" + id);
				let list = {}
				list.cart_id = id
				this.$http.postjiaCart(list).then(res => {
					console.log(res);
				})
			},

			//减

			postjianCarts(id) {
				console.log("-:" + id);
				let list = {}
				list.cart_id = id
				this.$http.postjianCart(list).then(res => {
					console.log(res);
				})
			},

			//删s
			postdelCarts(id) {
				this.$http.postdelCart().then(res => {
					console.log(res);
				})
			}
		}
	}
</script>


<style>
	@import url("./shopping.css");
</style>
